<template>
    <header>
        <div class="container clearfix">
            <h1 class="logo-h1">
                <a class="logo-link">
                    <img :src="logo"/>
                </a>
            </h1>
            <TopNavBar></TopNavBar>
            <div class="link-group-main">
                <ul class="link-group-list clearfix">
                    <li>
                        <router-link to="/user/login">
                            <i class="user-new-ico">
                                <icon name="user-circle-o"></icon>
                            </i>
                            <span>登录</span>
                        </router-link>
                    </li>

                    <li>
                        <router-link to="/user/register">
                            <i class="user-new-ico">
                                <icon name="user-plus"></icon>
                            </i>
                            <span>注册</span>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </header>
</template>
<style>
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}
</style>

<style lang="scss">
@import "../scss/var.scss";

header{
    background-color: $color-primary;
}

.router-link-active{
    text-decoration: none;
}

.logo-link{
    float: left;
}

.container, .page-container {
    max-width: 1140px;
    margin: 0 auto;
    height: 100%;
    box-sizing: border-box;
    box-sizing: border-box;
}

.logo-h1{
    margin: 0 10px 0 0 ;
    overflow: hidden;
    float: left;
    height: 60px;
}

.logo-link{
    overflow: hidden;
    margin-top:16px;

    img{
        width: 108px;
        display: block;
    }
}

.link-group-main{
    float: right;
}

.link-group-list{
    margin:0 5px 0 0;
    padding: 0;

    li{
        float: left;
        list-style: none;
        font-size: 14px;
        color: white;
        height: 60px;
        line-height: 60px;
        margin-left: 26px;
    }

    li:first-child{
        margin-left: 0;
    }

    a{
        color: #fff;
        display: inline-block;
        line-height: normal;
        vertical-align:middle;
        font-size:12px;
        cursor:pointer;
        overflow:hidden;
        margin-top: 3px;
        text-decoration:none;

        i{
            display: block;
            margin-bottom: -2px;
        }
    }

}

</style>

<script>

import TopNavBar from 'components/TopNavBar'
import Icon from 'vue-awesome/components/Icon.vue'
import 'vue-awesome/icons/user-circle-o'
import 'vue-awesome/icons/user-plus'



console.log(Icon)

export default {
    data() {
        return {
            logo: 'img/crm.svg'
        };
    },

    components: {
        'TopNavBar' : TopNavBar,
        'icon':Icon
    }
}
</script>
